<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="h_layout">
    <!--菜单 -->
    <TopMenu></TopMenu>
    <!-- 中间 -->
    <div class="h_layout_center">
      <!-- 中间-左 -->
      <div class="h_layout_center_left" :style="{ width: leftFrameInfo.range + 'px' }">
        <!-- 中间-左上 -->
        <div class="h_fold_button" v-if="leftFrameInfo.fold" @click="onLayoutHandel('LeftFold')">⬅️</div>
        <div class="h_fold_button" v-else @click="onLayoutHandel('LeftFold')">➡️</div>
        <!-- 中间-左下 -->
        <div class="h_layout_center_left_down">
          <!--导航列表-->
          <div class="h_list_vertical" @dblclick="onLayoutHandel('LeftFold')">
            <template v-for="(item, index) in leftNavigation">
              <div class="h_navigation_button_left" @click.stop="onLayoutHandel(item)"
                :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                {{ item.label }}
              </div>
            </template>
          </div>
          <!--折叠框 -->
          <template v-if="leftFrameInfo.fold">
            <LeftDraw v-if="onGetLeftFrameActive('LeftDraw')"></LeftDraw>
            <LeftPelData v-if="onGetLeftFrameActive('LeftPelData')"></LeftPelData>
            <LeftEquipData v-if="onGetLeftFrameActive('LeftEquipData')"></LeftEquipData>
            <LeftAnimation v-if="onGetLeftFrameActive('LeftAnimation')"></LeftAnimation>
            <LeftEvent v-if="onGetLeftFrameActive('LeftEvent')"></LeftEvent>
          </template>
        </div>
      </div>
      <!-- 中间-工作区 -->
      <CenterView v-if="centerFrameInfo === 1">
        <template v-slot:downView>
          <div class="h_list_horizontal h_flex_row_center" @dblclick.stop="onLayoutHandel('DownFold')">
            <div class="h_flex_row_center" v-for="item in downNavigation">
              <div class="navigation_button" @click="onLayoutHandel(item)" :class="[item.frameActive ? 'h_active' : '']"
                v-show="item.labelShow">
                {{ item.label }}
              </div>
            </div>
          </div>
          <!-- 下部框 -->
          <div class="h_fold_horizontal" :style="{ height: downFrameInfo.range + 'px' }" v-if="downFrameInfo.fold">
            <DownProject v-if="onGetDownFrameActive('DownProject')"></DownProject>
            <DownPage v-if="onGetDownFrameActive('DownPage')"></DownPage>
            <DownCanvas v-if="onGetDownFrameActive('DownCanvas')"></DownCanvas>
            <DownPenContainer v-if="onGetDownFrameActive('DownPenContainer')"></DownPenContainer>
            <DownBlockGroup v-if="onGetDownFrameActive('DownBlockGroup')"></DownBlockGroup>
            <DownPelAttr v-if="onGetDownFrameActive('DownPelAttr')"></DownPelAttr>
            <DownLogs v-if="onGetDownFrameActive('Downlogs')"></DownLogs>
          </div>
        </template>
      </CenterView>
      <CenterPelData v-if="centerFrameInfo === 2">
        <!--页面切换 -->
        <template v-slot:pageChange>
          <div class="navigation_list">
            <div class="list_bar_tag h_h_overflow">
              <div class="navigation_button" v-for="Item in pages" :class="[pageKey === Item.key ? 'h_active' : '']"
                @click="onSetCurrentPage(Item.key)">
                {{ Item.label }}
              </div>
            </div>
          </div>
        </template>
      </CenterPelData>
      <CenterEquipData v-if="centerFrameInfo === 4">
      </CenterEquipData>

      <!-- 中间-右 -->
      <div class="h_layout_center_right" :style="{ width: rightFrameInfo.range + 'px' }">

        <div class="h_fold_button" v-if="rightFrameInfo.fold" @click="onLayoutHandel('RightFold')">➡️</div>
        <div class="h_fold_button" v-else @click="onLayoutHandel('RightFold')">⬅️</div>
        <!-- 中间-右下 -->
        <div class="h_layout_center_right_dwon">
          <!--右侧折叠 -->
          <div class="h_right_fold" v-if="rightFrameInfo.fold">
            <RightProject v-if="onGetRightFrameActive('RightProject')"></RightProject>
            <RightSelect v-if="onGetRightFrameActive('RightSelect')"></RightSelect>
            <RightBlock v-if="onGetRightFrameActive('RightBlock')"></RightBlock>
            <RightPen v-if="onGetRightFrameActive('RightPen')"></RightPen>
            <RightEvent v-if="onGetRightFrameActive('RightEvent')"></RightEvent>
            <RightPelData v-if="onGetRightFrameActive('RightPelData')"></RightPelData>
            <RightChannel v-if="onGetRightFrameActive('RightChannel')"></RightChannel>
          </div>
          <!--导航列表 -->
          <div class="h_list_vertical" @dblclick="onLayoutHandel('RightFold')">
            <template v-for="item in rightNavigation">
              <div class="h_navigation_button_right" @click.stop="onLayoutHandel(item)"
                :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                {{ item.label }}
              </div>
            </template>

          </div>
        </div>
      </div>

    </div>
    <!-- 底部 -->
    <div class="h_layout_footer" v-if="centerFrameInfo === 1">
      <BottomFrame></BottomFrame>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import {
  reactive,
  computed,
  watch,
  onMounted,
} from "vue";


/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onCreatePelDataOpt,//创建_图元数据_选项
  onCreateChannelOpt,//创建_通道数据_选项
  onCreateReadEquipsOpt,//创建_设备数据_读_选项
  onCreateWriteEquipsOpt,//创建_设备数据_写_选项
  onSliderAccuracy, //获取滑块精度
  onCreatePathIdOpt, //创建_路径id_选项
  onPenContainerGet, //下载笔筒
  onBlockGroupGet,
  onProjectGetList,
  // 🌱 布局
  onActionLeftNavigation,  // 激活左框导航
  onActionRightNavigation, // 激活右框导航
  onActionDownNavigation,  // 激活下框导航
  onHideLeftNavigation,    // 隐藏左框导航
  onHideRightNavigation,   // 隐藏右框导航
  onShowRightNavigation,   // 显示右框导航
  onLayoutHandel,          // 布局处理器
  // 🌱  动态显示
  onShowSelected, // 选中显示
  onUpdataHtml,
  onPelDelete,
  onUpdataPelAnInfo, // 动画-更新图元动画
  onUpdataPelAttrs, // 更新-图元属性
  onUpdataPelEventInfo, // 更新_事件参数
  onSetGridSize, //设置格栅尺寸
  onPageSizeAndUnit, //更改画布单位及页面尺寸
  saveCanvasToProject, //转储-从_画布存储_到_工程存储
  onSetCurrentPage,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入组件
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { TopMenu } from "@/views/svg/TopMenu";


// 🍁  左
import { LeftDraw } from "@/views/svg/LeftDraw";
import { LeftPelData } from "@/views/svg/LeftPelData";
import { LeftEquipData } from "@/views/svg/LeftEquipData";
import { LeftEvent } from "@/views/svg/LeftEvent";
import { LeftAnimation } from "@/views/svg/LeftAnimation";
// 🍁  中
import { CenterView } from "@/views/svg/CenterView";
import { CenterPelData } from "@/views/svg/CenterPelData";
import { CenterEquipData } from "@/views/svg/CenterEquipData";

// 🍁  右
import { RightPelData } from "@/views/svg/RightPelData";
import { RightChannel } from "@/views/svg/RightChannel";
import { RightSelect } from "@/views/svg/RightSelect";
import { RightBlock } from "@/views/svg/RightBlock";
import { RightPen } from "@/views/svg/RightPen";
import { RightProject } from "@/views/svg/RightProject";
import { RightEvent } from "@/views/svg/RightEvent";

// 🍁  下
import { DownProject } from "@/views/svg/DownProject";
import { DownPage } from "@/views/svg/DownPage";
import { DownCanvas } from "@/views/svg/DownCanvas";
import { DownPenContainer } from "@/views/svg/DownPenContainer";
import { DownBlockGroup } from "@/views/svg/DownBlockGroup";
import { DownPelAttr } from "@/views/svg/DownPelAttr";
import { DownLogs } from "@/views/svg/DownLogs";
// 🍁  底
import { BottomFrame } from "@/views/svg/BottomFrame";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useLayoutStore } from "@/store/layoutStore"; // 布局
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const projectStore = useProjectStore(); // 工程
const layoutStore = useLayoutStore(); // 布局
const workStore = useWorkStore(); // 设备数据

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 选择的参数 */
let selectedPel = computed(() => canvasStore.selectedPel);
/** 选择键 */
let selectKeys = computed(() => canvasStore.selectKeys);
/** 上框参数*/
// let topFrameInfo = computed(() => layoutStore.topFrameInfo);
/* 上框列表*/
// let topMenu = computed(() => layoutStore.topMenu);
/** 左框参数*/
let leftFrameInfo = computed(() => layoutStore.leftFrameInfo);
/** 左框列表*/
let leftNavigation = computed(() => layoutStore.leftNavigation);
/** 右框参数*/
let rightFrameInfo = computed(() => layoutStore.rightFrameInfo);
/** 右框列表*/
let rightNavigation = computed(() => layoutStore.rightNavigation);
/** 下框参数*/
let downFrameInfo = computed(() => layoutStore.downFrameInfo);
/** 下框列表*/
let downNavigation = computed(() => layoutStore.downNavigation);
/** 中间框参数 0,1,2*/
let centerFrameInfo = computed(() => layoutStore.centerFrameInfo);
/** 通道数据集 */
const channels = computed(() => workStore.channels);
/** 设备数据 */
const equipData = computed(() => workStore.equipData);
/** 图元数据 */
let pelData = computed(() => workStore.pelData);
/** 页面 */
const pages = computed(() => projectStore.pages);
/** 页面键 */
const pageKey = computed(() => projectStore.pages[projectStore.pageIndex].key);

/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */
/** 获取下框激活状态*/
const onGetDownFrameActive = (key: string): boolean => {
  // console.log("获取下框激活状态")
  let res = false;
  let downNavigation = layoutStore.downNavigation;
  downNavigation.forEach((element: any) => {
    if (element.key === key) {
      res = Boolean(element.frameActive);
    }
  });
  return res;
};

/** 获取左框激活状态*/
const onGetLeftFrameActive = (key: string): boolean => {
  // console.log("获取左框激活状态")
  let res = false;
  let leftNavigation = layoutStore.leftNavigation;
  leftNavigation.forEach((element: any) => {
    if (element.key === key) {
      res = Boolean(element.frameActive);
    }
  });
  return res;
};

/** 获取右框激活状态*/
const onGetRightFrameActive = (key: string): boolean => {
  // console.log("获取右框激活状态")
  let res = false;
  let rightNavigation = layoutStore.rightNavigation;
  rightNavigation.forEach((element: any) => {
    if (element.key === key) {
      res = Boolean(element.frameActive);
    }
  });
  return res;
};

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
  // console.log("钩子函数_挂载后")
  onProjectGetList(); //获取工程列表
  onPenContainerGet(); //下载笔筒
  onBlockGroupGet(); //下载块组
  setTimeout(() => {
    onActionDownNavigation("DownProject"); // 激活下框导航-工程
  }, 10);
  onSliderAccuracy(); //获取滑块精度
  onCreatePelDataOpt();    // 创建_图元数据_选项
  onCreateChannelOpt();    // 创建_通道数据_选项
  onCreateReadEquipsOpt();  // 创建_设备数据_读_选项
  onCreateWriteEquipsOpt(); // 创建_设备数据_写_选项
});

/* ================================================================================================ */
//                                 ★ 监听
/* ================================================================================================ */
// 监听-选择的图元
watch(
  () => selectedPel.value,
  () => {
    // console.log("-----------------------------------------------------------------监听-选择的图元数据");
    onUpdataPelEventInfo(); //更新_事件参数
    onUpdataPelAnInfo(); // 更新动画
    onUpdataPelAttrs(); // 更新图元属性
    onUpdataHtml(); // 更新标签
    onShowSelected(); // 选中显示
  },
  { deep: true }
);

// 监听-选择键
watch(
  () => selectKeys.value,
  () => {
    // console.log("--------------------------------------------------------------监听-选择键")
    let SelectedKeyLength = selectKeys.value.length;
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 切换布局 视图模式
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (SelectedKeyLength > 0 && onGetLeftFrameActive('LeftDraw')) {
      // console.log("视图模式")
      // console.log(canvasStore.selectKeys)
      onActionDownNavigation("DownPelAttr"); // 激活下框导航
      onActionRightNavigation("RightSelect"); // 激活右框导航
      setTimeout(() => {
        onShowSelected(); // 选中显示
      }, 10);
      onCreatePathIdOpt(); //创建_路径id_选项
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 切换布局 视图模式
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (SelectedKeyLength === 0 && onGetLeftFrameActive('LeftDraw')) {
      // console.log("编辑 视图模式")
      onShowRightNavigation("RightPen");     // 显示右框导航
      onShowRightNavigation("RightBlock");   // 显示右框导航
      onActionLeftNavigation("LeftDraw");    // 激活左框导航
      onActionDownNavigation("DownCanvas");  // 激活下框导航
      onHideLeftNavigation("LeftEvent");     // 隐藏-事件
      onHideLeftNavigation("LeftAnimation"); // 隐藏-动画
      if (workStore.pels.length > 0) {
        onActionRightNavigation("RightSelect"); // 激活右框导航
      }
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 切换布局 图元数据模式
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (SelectedKeyLength === 0 && onGetLeftFrameActive('LeftPelData')) {
      // console.log("编辑 图元数据模式")
      layoutStore.centerFrameInfo = 2
      layoutStore.leftFrameInfo.value.fold = false;
      layoutStore.leftFrameInfo.value.range = 0;
      onHideRightNavigation("RightChannel")    // 隐藏右框导航
      onHideRightNavigation("RightSelect")     // 隐藏右框导航
      onHideRightNavigation("RightBlock")      // 隐藏右框导航
      onHideRightNavigation("RightPen")        // 隐藏右框导航
      onHideRightNavigation("RightAnimation")  // 隐藏右框导航
      onHideRightNavigation("RightEvent")      // 隐藏右框导航
    }
  }
);

// 画布属性
watch(
  () => canvasStore.canvasAttr,
  () => {
    onSetGridSize(); //设置格栅尺寸
    onPageSizeAndUnit(); //更改画布单位及页面尺寸
    saveCanvasToProject(); //转储-从_画布存储_到_工程存储
  },
  { deep: true }
);

// 监听-通道数据
watch(
  () => channels,
  () => {
    onCreateChannelOpt(); //创建_通道数据_选项
  },
  { deep: true }
);

// 监听-设备数据
watch(
  () => equipData,
  () => {
    onCreateReadEquipsOpt();  // 创建_设备数据_读_选项
    onCreateWriteEquipsOpt(); // 创建_设备数据_写_选项
  },
  { deep: true }
);

// 监听-图元数据
watch(
  () => pelData,
  () => {
    onCreatePelDataOpt(); //创建 图元数据 选项
  },
  { deep: true }
);

// 监听-键盘
document.onkeydown = function (e) {
  // console.log("-监听键盘");
  // console.log(e);

  // 键盘_Escape
  if (e.key == "Escape") {
    e.preventDefault();
    // console.log("键盘_Escape");
    canvasStore.workState = 0; // 清理●菜单-绘图
    menuStore.setMenuChild('svgPel', 0);       // 设置子菜单状态-SVG图元
    menuStore.setMenuChild('divPel', 0);       // 设置子菜单状态-DIV图元
    menuStore.setMenuChild('componertPel', 0); // 设置子菜单状态-组件图元
    menuStore.setMenuChild('eidt', 0);         // 设置子菜单状态-编辑
    menuStore.setMenuChild('wrapLayout', 0);   // 设置子菜单状态-包及图层编辑
    menuStore.setMenuChild('editLine', 0);     // 设置子菜单状态-线编辑
    canvasStore.tips = ""; // 清理●提示
    canvasStore.workState = 0; //清理-工作状态
    canvasStore.drawPelType = ""; //清理-绘制类型
    canvasStore.recordPoint = []; // 清理●记录点
  }
  // 键盘_↑
  else if (!e.ctrlKey && e.key == "ArrowUp") {
    e.preventDefault();
    // console.log("键盘_↑");
  }
  //键盘_↓
  else if (!e.ctrlKey && e.key == "ArrowDown") {
    e.preventDefault();
    // console.log("键盘_↓");
  }
  // 键盘_←
  else if (!e.ctrlKey && e.key == "ArrowLeft") {
    e.preventDefault();
    // console.log("键盘_←");
  }
  // 键盘_→
  else if (!e.ctrlKey && e.key == "ArrowRight") {
    e.preventDefault();
    // console.log("键盘_→");
  }
  // 键盘_Ctrl  c
  else if (e.ctrlKey && e.key.toLowerCase() == "c") {
    e.preventDefault();
    // console.log("键盘_Ctrl  c");
  }
  //键盘_Del
  else if (e.key == "Delete") {
    e.preventDefault();
    // console.log("键盘_deleted")
    onPelDelete(); //删除图元
  }
  //键盘_Ctrl  ↑
  else if (e.ctrlKey && e.key == "ArrowUp") {
    e.preventDefault();
    // console.log("键盘_Ctrl  ↑");
  }
  //键盘_Ctrl  ↓
  else if (e.ctrlKey && e.key == "ArrowDown") {
    e.preventDefault();
    // console.log("键盘_Ctrl  ↓");
  }
  // 键盘_Ctrl_←
  else if (e.ctrlKey && e.key == "ArrowLeft") {
    e.preventDefault();
    // console.log("键盘_Ctrl_←");
  }
  // 键盘_Ctrl_→
  else if (e.ctrlKey && e.key == "ArrowRight") {
    e.preventDefault();
    // console.log("键盘_Ctrl_→");
  }
  // 键盘_Ctrl_Alt_+ | 画布放大
  if (e.ctrlKey && e.altKey && e.key == "+") {
    e.preventDefault();
    // console.log("键盘_Ctrl_Alt_+");
  }
  // 键盘_Ctrl_Alt_- | 画布缩小
  if (e.ctrlKey && e.altKey && e.key == "-") {
    e.preventDefault();
    // console.log("键盘_Ctrl_Alt_-");
  }
  // 键盘_Ctrl_Alt_m | 画布居中
  if (e.ctrlKey && e.altKey && e.key == "m") {
    e.preventDefault();
    // console.log("键盘_Ctrl_Alt_-");
  }
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

// 布局
.h_layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow: hidden;
  color: #ffffff;
}

// 布局-中心
.h_layout_center {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  color: #ffffff;
  background-color: #000000;
}

// 中间-左
.h_layout_center_left {
  margin-left: 5px;
  padding: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 25px;

  .h_fold_button {
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: 100%;
    text-align: right;
    font-size: 18px;
    border-bottom: 1px solid rgb(100, 100, 100);

    &:hover {
      cursor: pointer; // 小手指
      background-color: rgb(100, 100, 100);
    }
  }
}

// 中间-左下
.h_layout_center_left_down {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* 水平折叠 */
.h_fold_horizontal {
  width: 100%;
  background-color: rgb(80, 80, 80);
}

//垂直折叠框
.h_left_fold {
  max-width: 300px;
  height: 100%;
  background-color: rgb(80, 80, 80);
}

//右边折叠框
.h_right_fold {
  height: 100%;
  background-color: rgb(80, 80, 80);
}

// 中间-左
.h_layout_center_right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 22px;


  .h_fold_button {
    height: 25px;
    width: 100%;
    text-align: left;
    font-size: 18px;
    border-bottom: 1px solid rgb(100, 100, 100);

    &:hover {
      cursor: pointer; // 小手指
      background-color: rgb(100, 100, 100);
    }
  }
}

// 中间-右下
.h_layout_center_right_dwon {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* 水平导航列表 */
.h_list_horizontal {
  margin: 0px;
  padding: 0px;
  max-height: 26px;
  width: 100%;
  user-select: none;
  background-color: rgb(0, 0, 0);

  // 水平导航按钮
  .navigation_button {
    margin-left: 10px;
    margin-right: 10px;
    padding: 0px;
    width: 70px;
    height: 24px;
    font-size: medium;
    text-align: center;
    background-color: rgb(50, 50, 50);
    color: rgb(218, 218, 218);
    border-bottom: 3px solid rgb(0, 0, 0);
    cursor: pointer; // 小手指

    &:hover {
      color: rgb(255, 255, 255);
      border-bottom: 3px solid rgb(0, 0, 255);
    }

    &.h_active {
      background-color: rgb(80, 80, 80);
      color: rgb(0, 0, 0);
      border-bottom: 3px solid #1d9f00;
    }
  }

  &:hover {
    cursor: s-resize; //箭头↕
  }
}

// 垂直导航列表
.h_list_vertical {
  margin: 0px;
  padding: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  user-select: none;
  background-color: rgb(0, 0, 0); // 左侧导航按钮

  // 左侧导航按钮
  .h_navigation_button_left {
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 20px;
    font-size: medium;
    text-align: center;
    background-color: rgb(50, 50, 50);
    border-left: 3px solid rgb(50, 50, 50);
    color: rgb(176, 176, 176);
    cursor: pointer; // 小手指

    &:hover {
      color: rgb(255, 255, 255);
      border-left: 3px solid rgb(0, 0, 255);
    }

    &.h_active {
      background-color: rgb(80, 80, 80);
      color: rgb(0, 0, 0);
      border-left: 3px solid #1d9f00;
    }
  }

  // 右侧导航按钮
  .h_navigation_button_right {
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 20px;
    font-size: medium;
    text-align: end;
    background-color: rgb(80, 80, 80);
    border-right: 3px solid rgb(80, 80, 80);
    color: rgb(31, 31, 31);
    cursor: pointer; // 小手指

    &:hover {
      margin-left: 0px;
      color: rgb(255, 255, 255);
      border-right: 3px solid rgb(0, 0, 255);
    }

    &.h_active {
      margin-left: 0px;
      background-color: rgb(80, 80, 80);
      color: rgb(0, 0, 0);
      border-right: 3px solid #1d9f00;
    }
  }

  &:hover {
    cursor: pointer; // 小手指
  }
}

// 布局-底部
.h_layout_footer {
  width: 100vw;
  height: 25px;
  border-top: 1px solid rgb(188, 188, 188);
}

/* 水平导航列表 */
.navigation_list {
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 100%;
  user-select: none;
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: start;

  // 列表条标签
  .list_bar_tag {
    margin: 0px;
    padding: 0px;
    height: 40px;
    width: 60vw;
    user-select: none;
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: row;
    justify-content: start;
  }

  // 水平导航按钮
  .navigation_button {
    margin-left: 0px;
    margin-right: 3px;
    padding: 0px;
    min-width: 70px;
    height: 26px;
    font-size: medium;
    text-align: center;
    background-color: rgb(80, 80, 80);
    color: rgb(218, 218, 218);
    border-bottom: 3px solid rgb(80, 80, 80);
    cursor: pointer; // 小手指

    &:hover {
      color: rgb(0, 0, 0);
    }

  }

  // 激活
  .h_active {
    background-color: rgb(118, 118, 118);
    color: rgb(0, 0, 0);
    border-bottom: 3px solid #1d9f00;
  }

}
</style>
